import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { Flex, Icon, Grid, NavBar } from 'antd-mobile';
import { getSearch } from '../../../utils/utils';
import Affix from 'antd/lib/affix';
import 'antd/lib/affix/style/index.css';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

// widget 
import LeftSidebar from './left-sidebar';
import RightSidebar from './right-sidebar';


class ShopBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
            showSale: false,
        	activeTab: null,
            isShowFilter: false,
            isShowSidebar: false,
        	priceType: 'downup', // none | downup | updown
        }
    } 
    onClickNewTab() {
    	if(this.state.activeTab === 'new') {
    		this.setState({
    			activeTab: null
    		}, this.onSubmitSearch.bind(this, null))
    	} else {
    		this.setState({
    			activeTab: 'new'
    		}, this.onSubmitSearch.bind(this, 'new'))
    	}
    }
    onClickSaleTab() {
    	if(this.state.activeTab === 'sale') {
    		this.setState({
    			activeTab: null
    		}, this.onSubmitSearch.bind(this, null))
    	} else {
    		this.setState({
    			activeTab: 'sale'
    		}, this.onSubmitSearch.bind(this, 'sale'))
    	}
    }
    onClickPriceTab() {
    	if(this.state.activeTab === 'price') {
    		this.setState({
    			activeTab: 'price',
    			priceType: this.state.priceType === 'downup' ? 'updown' : 'downup'
    		}, this.onSubmitSearch.bind(this, 'price'))
    	} else {
    		this.setState({
    			activeTab: 'price'
    		}, this.onSubmitSearch.bind(this, 'price'))
    	}
    }
    onClickTodayTab() {
    	if(this.state.activeTab === 'today') {
    		this.setState({
    			activeTab: null
    		}, this.onSubmitSearch.bind(this, null))
    	} else {
    		this.setState({
    			activeTab: 'today'
    		}, this.onSubmitSearch.bind(this, 'today'))
    	}
    }
    onClickSale() {
        if(this.state.activeTab === 'today') {
            this.setState({
                activeTab: null
            })
        } else {
            this.setState({
                activeTab: 'today'
            })
        }
        this.setState({
            showSale: !this.state.showSale
        })
    }
    onSubmitSearch(type) {
    	let searchParam = {}
    	const { dispatch, params, resetKeywords } = this.props
    	switch( type ) {
    		case 'new':
    			searchParam = {
    				sortBy: 'latest'
    			}
    			break;
    		case 'sale':
    			searchParam = {
    				sortBy: 'sale+desc'
    			}
    			break;
    		case 'price':
    			searchParam = {
    				sortBy: this.state.priceType === 'downup' ? 'price+asc' : 'price+desc'
    			}
    			break;
    		case 'today':
    			searchParam = {
    				sortBy: 'today'
    			}
    			break;
    	}
        this.setState({
            showSale: false
        })
    	dispatch({
    		type: 'goods/getBrandDetail',
    		payload: {
    			brandId: params.shopId,
    			...searchParam
    		}
    	})
        resetKeywords && resetKeywords()
    }

	render() {
		const { meyley, goods, keywords, location } = this.props
        const search = getSearch(location)

	 	return (
	 		<div className={`${styles['shop-body']} shop-body`}>

                <Affix offsetTop={0} >
                    <NavBar 
                        style={{padding: 0}} 
                        iconName={null} 
                        className={styles["shop-nav-bar"]} 
                        leftContent={[<img key={0} style={{width: '0.40rem', marginLeft: '0.12rem'}} src={require('../../../assets/icon/search-list.png')} /> ]} 
                        mode="light" 
                        onLeftClick={ () => this.setState({ isShowSidebar: true }) }
                        rightContent={[<img key={0} onClick={() => this.setState({isShowFilter: true})} style={{width: '0.40rem', marginRight: '0.12rem'}} src={require('../../../assets/icon/filter.png')} />]}
                    ><span style={{color: '#fff', fontSize: '0.28rem'}}>{goods.brandDetail && goods.brandDetail.englishName} {goods.brandDetail && goods.brandDetail.brandName}</span></NavBar>

                    
                    <RightSidebar 
                        isShowFilter={this.state.isShowFilter}
                        onClose={() => this.setState({ isShowFilter: false })}

                        {...this.props}
                        />
                    <LeftSidebar 
                        isShowSidebar={this.state.isShowSidebar} 
                        onClose={() => this.setState({ isShowSidebar: false}) } 
                        {...this.props}
                    />

                    <div className={styles['shop-body-nav']}>
                        <Flex >
                            <Flex.Item>
                                <div onClick={this.onClickNewTab}  className={styles["shop-body-nav-item"]} style={this.state.activeTab === 'new' ? { color: '#FF003D'} : null}>
                                最新
                                </div>
                            </Flex.Item>
                                
                            <Flex.Item>
                                <div onClick={this.onClickSaleTab} className={styles["shop-body-nav-item"]} style={this.state.activeTab === 'sale' ? { color: '#FF003D'} : null}>
                                销量
                                </div>
                            </Flex.Item>
                            <Flex.Item>
                                <div onClick={this.onClickPriceTab} className={styles["shop-body-nav-item"]} style={this.state.activeTab === 'price' ? { color: '#FF003D'} : null}>
                                    <span style={{marginRight: '0.06rem'}}>价格</span>
                                    <i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-arrow-up']} ${styles['search-result-icon']} `} style={this.state.priceType === 'updown' ? {display: 'inline-block', position: 'relative', bottom: '0.04rem'} : {display: 'none'}}/>
                                    <i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-arrow-down']} ${styles['search-result-icon']} `}  style={this.state.priceType === 'downup' ? {display: 'inline-block', position: 'relative', bottom: '0.04rem'} : {display: 'none'}}/>
                                </div>
                            </Flex.Item>
                            <Flex.Item>
                                <div onClick={this.onClickSale} className={styles["shop-body-nav-item"]} style={this.state.activeTab === 'today' ? { color: '#FF003D'} : null}>
                                    今日特价
                                </div>
                            </Flex.Item>
                        </Flex>
                    </div>
                </Affix>

                <div className={styles['shop-body-grid']}>
                {
                    !this.state.showSale && (keywords || search.keywords) ? (
                        <div className={styles['shop-body-search-trips']}>
                        搜索 "{keywords || search.keywords}"，共 {goods.brandDetail && goods.brandDetail.goodsList.length} 个结果
                        </div>
                        ) : null
                }
                {
                    this.state.showSale ? (
                        <div className={styles['shop-body-search-trips']}>
                            暂时没有特价，有空常来哦！
                        </div>
                        ) : (<div>
                            {
                                goods.brandDetail && goods.brandDetail.goodsList.length ? (
                                    <Grid data={goods.brandDetail.goodsList} columnNum={2} hasLine={false}
                                    renderItem={(dataItem, index) => (
                                      <div className={styles['shop-body-item-single']} key={index} onClick={() => browserHistory.push(`/production/detail/${dataItem.goodsId}`)} >
                                        <div className={styles["shop-body-item-img"]}>
                                            <img src={dataItem.goodsThumb} style={{ width: '80%', margin: '0.12rem', maxHeight: '3.00rem', minHeight: '3.00rem' }} />
                                        </div>
                                        <div className={styles['shop-body-item-title']}>
                                        {dataItem.goodsName}
                                        </div>
                                        <div className={styles["shop-body-item-price"]}>
                                        ￥{dataItem.shopPrice}
                                        </div>
                                      </div>
                                    )}
                                    />
                                ) : (<span style={{textAlign: 'center', padding: '0.24rem'}}>暂无商品</span>)
                            }
                        </div>)
                }
                </div>

	 		</div>
	  	);
	}
};

ShopBody.propTypes = {
};

export default ShopBody
